<%--
  Created by IntelliJ IDEA.
  User: 王浩然
  Date: 2022/7/1
  Time: 9:17
  To change this template use File | Settings | File Templates.
--%>

<%--个人信息展示页面--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <title>个人信息</title>
</head>
<body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>个人信息</legend>
    </fieldset>


    <form class="layui-form" action="" lay-filter="updateUserFilter" id="updateUserForm" >
        <div class="layui-form-item">
            <label class="layui-form-label">用户编号</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" disabled required lay-verify="required" readonly class="layui-input"
                    value="${user.user_id}"   class="layui-input" id="UpUserid">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                       value="${user.user_name}" class="layui-input" id="UpUsername">
<%--                <span style="color: red"></span>--%>
            </div>
        </div>
<%--        <div class="layui-form-item">--%>
<%--            <label class="layui-form-label">密码</label>--%>
<%--            <div class="layui-input-inline">--%>
<%--                <input type="text" name="password" value="${user.password}" required lay-verify="required"  class="layui-input">--%>
<%--            </div>--%>
<%--        </div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline">
                <select name="deptId" lay-verify="" id="deptMenuUpdate">

                </select>
            </div>
        </div>

        <!--修改头像-->
        <input type="hidden" id="avatarUpdate" name="avatar" value="">

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">上传按钮</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test">
                    <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">预览</label>
            <div class="layui-input-block">
                <img id="imageUpdate" style="width: 100px;height: 80px" src="${user.avatar}">
            </div>
        </div>
<%--        <div class="layui-form-item">--%>
<%--            <label class="layui-form-label">状态</label>--%>
<%--            <div class="layui-input-block">--%>
<%--                <input type="radio" name="status" value="1" title="有效">--%>
<%--                <input type="radio" name="status" value="0" title="无效">--%>
<%--            </div>--%>
<%--        </div>--%>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateUser">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

<script>
    layui.use(['table', 'form', 'jquery', 'upload', 'element', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        // $("#imageUpdate").attr('src', obj.data.avatar)
        // 动态的获取部门表信息
        $.ajax({
            url:"${pageContext.request.contextPath}/dept/findAllDept.do",
            type:"POST",
            dataType:"JSON",
            success:function (ret) {
                if(ret.code==0){
                    var htmlStr="";
                    for (let i = 0; i < ret.data.length; i++) {
                        htmlStr+="<option value="+ret.data[i].deptId+">"+ret.data[i].deptName+"</option>"
                    }
                    $("#deptMenuUpdate").html(htmlStr);
                    //重新渲染表单
                    layui.use('form',function () {
                        var form=  layui.form;
                        form.render('');
                    })
                }
            }
        });
        layui.use('upload', function () {
            let upload = layui.upload;
            let $ = layui.$;
            //执行实例
            let uploadInst = upload.render({
                elem: '#test' //绑定元素
                , url: '${pageContext.request.contextPath}/user/imgUpload.do' //上传接口
                , done: function (res) {
                    if (res.code == 0) {
                        console.log("----------------")
                        layer.msg("上传成功");
                        //获得图片的路径
                        let src = res.data.src;
                        console.log(res.data)
                        //将图片进行回显
                        $("#imageUpdate").attr("src", src);
                        //将图片的地址赋值给 form的隐藏域
                        $("#avatarUpdate").attr("value", src);
                    }
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });
        // 更新用户信息
        form.on('submit(updateUser)',function (data) {
            console.log(data.field)
            $.ajax({
                url: "${pageContext.request.contextPath}/user/updateUser.do"
                ,data: data.field  //,_method:"put"
                ,dataType: "json"
                ,type: "post"
                ,success: function (redata) {
                    if (redata.code == 0) {
                        layer.closeAll();//关闭对话框
                        table.reload('demo',{
                            page: {
                                curr: 1
                            }
                        });
                    }
                    layer.msg(redata.msg);
                }
            });
            return false;
        });
    })



</script>
</body>
</html>
